<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>九朵礼盒</title>
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <style>
        .sliderMain li {
            list-style: none;
        }
        
        #dialog {
            text-align: center;
            font-size: 1.4rem;
        }
    </style>
</head>

<body>

    <!-- 头部  s -->
    <header class="aui-bar aui-bar-nav aui-bar-light" style="background: #4e536c;">
        <a class="aui-pull-left aui-btn" onclick="back()">
            <span class="aui-iconfont aui-icon-left" style="color: #FFFFFF;"></span>
        </a>
        <div class="aui-title" style="color: #FFFFFF;">商品详情</div>
    </header>
    <!-- 主题内容 -->
    <div class="content">
        <template id="list">
        <!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="{{coverImages.coverImg1}}">
                </div>
                <div class="swiper-slide">
                    <img src="{{coverImages.coverImg2}}">
                </div>
                <div class="swiper-slide">
                    <img src="{{coverImages.coverImg3}}">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!-- 礼盒 -->
        <div class="shangai">
            <h3>{{boutiqueName}}</h3>
            <p>{{remak}}</p>
            <div class="cost">
                <div class="fl count">
                    <b>￥</b>
                    <span class="price">{{boutiquePrice}}</span>
                    <!--<i>/盒</i>-->
                </div>
            </div>
        </div>
        <!-- 商品详情 -->
        <div class="rim"></div>
        <div class="detail">
            <p>商品详情</p>
            <div class="title bgcolor">
                <span class="fl lf">包装</span>
                <span class="fr rg">{{packing}}</span>
            </div>
            <div class="title">
                <span class="fl lf">品牌</span>
                <span class="fr rg">{{brand}}</span>
            </div>
            <div class="title bgcolor">
                <span class=" lf">内容</span>
                <span class=" rg">{{productContent}}</span>
            </div>
            <div class="title">
                <span class=" lf">保质期</span>
                <span class=" rg">{{shelfLife}}</span>
            </div>
            <div class="title bgcolor " style="margin-bottom: 0.6rem">
                <span class=" lf">贮存</span>
                <span class=" rg">{{storageExplain}}</span>
            </div>
        </div>
        <!-- 亮点 -->
        <div class="rim"></div>
        <div class="detail">
            <p>亮点</p>
            <div class="lightspot">
                <p>
                    {{highlightsBriefly}}
                </p>
                <img src="{{highlightsImages.highlightsImg1}}" alt="" class="亮点">
            </div>

            <div class="lightspot">
                <p>
                    {{highlightsDetail}}
                </p>
                <img src="{{highlightsImages.highlightsImg2}}" alt="" class="亮点">
            </div>
        </div>
        </template>
    </div>
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../js/swiper.jquery.min.js"></script>
    <script src="../js/comment.js"></script>
    <script src="../js/template.js"></script>
    <script>
        $(function() {
            var query = window.location.search; //获取URL地址中？后的所有字符  
            var str = decodeURI(query);
            var boutiqueId;
            if (str[0] === '?') {
                var newstr = str.substr(1);
                boutiqueId = JSON.parse(newstr);
                load()
            }



            function load() {
                $.ajax({
                    type: 'get',
                    url: url + 'amdin/boutique/boutique/' + boutiqueId,
                    success: function(res) {
                        var res = res.datas.boutique;
                        res.coverImages = JSON.parse(res.coverImages);
                        res.highlightsImages = JSON.parse(res.highlightsImages);
                        res.manyImages = JSON.parse(res.manyImages);
                        console.log(res);
                        var html = template("list", res);
                        $('.content').html(html);
                        var swiper = new Swiper('.swiper-container', {
                            pagination: '.swiper-pagination',
                            autoplay: 3000,

                        });
                    }
                })
            }



        })
    </script>

</body>

</html>